<template>
	<div class="Evaluation">
		<div class="Evaluation_top" v-if="message.status == 2">
			<div class="Evaluation_cont_items">
				<div class="Evaluation_cont_items_top">
					<div class="Evaluation_cont_items_top_left">
						邀约服务
					</div>
					<div  v-if="message.status == 2">
						<div class="Evaluation_cont_items_top_right" v-if="message.statuss == 0">
							待评价
						</div>
						<div class="Evaluation_cont_items_top_right colorHui" v-else>
							已评价
						</div>
					</div>
					
					<div  v-else>
						<div class="Evaluation_cont_items_top_right colorHui" >
							{{message.statuss | statusFilter}}
						</div>
					</div>
					
					
				</div>
				<div class="Evaluation_cont_items_p">
					服务人员：{{message.name || ''}}
				</div>
				<div class="Evaluation_cont_items_p">
					创建时间：{{message.addtime || ''}}
				</div>
				<div class="Evaluation_cont_items_p">
					评价等级：{{message.point || '暂无'}}
				</div>
				<div class="Evaluation_cont_items_line">

				</div>
				<div class="Evaluation_cont_items_btn"   >
					<div class="Evaluation_cont_items_btn_item" @click.stop='showEvent' v-if="message.statuss == 0 && message.status == 2">
						评价
					</div>
				</div>
			</div>
		</div>

		<!-- 评价底部 -->
		<!-- <u-transition  mode="fade"> -->
		<div class="mask" @click='show=!show' v-if="show">
			<div class="Evaluation_bottom">
				<div class="Evaluation_bottom_title">
					服务评价
				</div>
				<div class="Evaluation_bottom_sub">
					请评价下苏江服务体验吧～
				</div>
				<div class="Evaluation_bottom_line">

				</div>
				<div class="Evaluation_bottom_str">
					<u-rate active-color="#FFBE2E" inactive-color="#F1E5D8" size='35' gutter="5"
						v-model="point"></u-rate>
				</div>
				<div class="Evaluation_bottom_text">
					<!-- {{evaTitle}}  --> 感谢评价
				</div>


				<div class="Evaluation_bottom_btn" @click.stop='sendEvnet()' >
					确认评价
				</div>
			</div>

		</div>
		<!-- </u-transition> -->
	</div>
</template>

<script>
	export default {
		filters: {
			statusFilter(v) {
				var s = ''
				// 入住状态 -1邀约 0保存草稿 1审核中 2审核通过 3待搬家 4已搬离
				switch (v) {
					case '-1':
						s = '邀约'
						break;
					case '0':
						s = '保存草稿'
						break;
					case '1':
						s = '审核中'
						break;
					case '2':
						s = '审核通过'
						break;
					case '3':
						s = '待搬家'
						break;
					case '4':
						s = '已搬离'
						break;
				}
				return s
			}
		},
		props: {
			msg: [Array, String,Object]
		},
		data() {
			return {
				show: false,
				message: {},
				anchor_id: uni.getStorageSync('author_id'),
				storey_id: 0,
				point: 5,
				evaTitle: '非常差'
			}
		},
		watch: {
			msg(news, odl) {
				this.message = news
				console.log("anchor_id: uni.getStorageSync('author_id'),anchor_id: uni.getStorageSync('author_id'),1111",this.msg)
			}
		},
		onShow() {
			this.message = this.msg || {}
			console.log("anchor_id: uni.getStorageSync('author_id'),anchor_id: uni.getStorageSync('author_id'),",this.msg)
			if (this.msg) return
			this.getIndexMessage()
		},
		methods: {
			async getIndexMessage() {
				const {
					data
				} = await this.$request(this.$Api.indexMessage, {
					anchor_id: this.anchor_id
				}, "POST")
				if (data.code !== 0) return
				this.message = data.data
				console.log('111', this.message)
			},
			showEvent(id) {
				console.log('showEvent', )
				this.storey_id = id
				this.show = true
			},
			async sendEvnet() {
				const {
					data
				} = await this.$request(this.$Api.indexPoint, {
					anchor_id: this.anchor_id,
					point: this.point,
					title: this.evaTitle
				}, "POST")
				if (data.code !== 0) return
				this.show = false
				this.getIndexMessage()
			},
			pointChange(change) {

				switch (change) {
					case 1:
						this.evaTitle = '非常差'
						break;
					case 2:
						this.evaTitle = '差'
						break;
					case 3:
						this.evaTitle = '一般'
						break;
					case 4:
						this.evaTitle = '满意'
						break;
					case 5:
						this.evaTitle = '超赞'
						break;

				}
				console.log('pointChangepointChange', change)
			}
		}
	}
</script>

<style lang="scss">
	.colorHui {
		color: #999 !important;
	}

	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}


	.Evaluation_bottom {
		width: 748rpx;
		height: 570rpx;
		background: #FFFFFF;

		padding: 0 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		// position: relative;

		.Evaluation_bottom_title {
			font-size: 40rpx;
			text-align: center;
			width: 100%;
			margin-top: 46rpx;
		}

		.Evaluation_bottom_sub {
			font-size: 28rpx;
			margin-top: 14rpx;
			text-align: center;
			width: 100%;
			color: #999;
		}

		.Evaluation_bottom_line {
			width: 100%;
			height: 2rpx;
			background: #DDDDDD;
			margin-top: 32rpx;
		}

		.Evaluation_bottom_str {
			margin: 32rpx auto 0 auto;
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.Evaluation_bottom_text {
			font-size: 28rpx;
			color: #FCA129;
			text-align: center;
			margin-top: 40rpx;
		}

		.Evaluation_bottom_btn {
			position: fixed;
			z-index: 1;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 88rpx;
			background: #9013FE;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.Evaluation_top {
		margin: 28rpx auto;
		padding: 0 32rpx;

		.Evaluation_cont_items {
			width: 100%;
			width: 694rpx;
			min-height: 44rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 32rpx 12rpx 32rpx;
			box-sizing: border-box;
		}

		.Evaluation_cont_items_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 108rpx;

			.Evaluation_cont_items_top_left {
				font-size: 32rpx;
				font-weight: bold;
			}

			.Evaluation_cont_items_top_right {
				font-size: 32rpx;
				color: #FF1D1D;
			}

		}

		.Evaluation_cont_items_p {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 14rpx;
		}

		.Evaluation_cont_items_line {
			width: 618rpx;
			height: 2rpx;
			background: #DDDDDD;
			margin-top: 14rpx;
		}

		.Evaluation_cont_items_btn {
			display: flex;
			justify-content: flex-end;
			height: 110rpx;
			align-items: center;

			.Evaluation_cont_items_btn_item {
				width: 164rpx;
				height: 68rpx;
				background: #9013FE;
				color: #fff;
				font-size: 28rpx;
				margin-left: 20rpx;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}
</style>